<template>
  <div class>
    <yes-tabs :tab-list="tabList" @tab-click="handleClick" />
    <section class="searchBox">
      <!-- {{$store.state.personPrepareLesson.prepareLesson}} -->
      <el-row :gutter="40" type="flex" justify="space-between">
        <el-col :span="12">
          <div class="flex-box">
            <el-input
              v-model="state"
              class="fl"
              placeholder="请输入内容"
              prefix-icon="el-icon-search el-input__icon"
              @keyup.enter.native="searchList(state)"
            />
            <el-select v-model="listQuery.lessonId" clearable class="marLeft" placeholder="筛选">
              <el-option
                v-for="(sleItem , i) in ['收到文言','中英文言','化学','语文']"
                :value="i"
                :label="sleItem"
              />
            </el-select>
          </div>
        </el-col>
        activeKeyFn:{{ activeKeyFn }}
        <el-col :span="4">
          <el-button
            v-if="activeTabName==='TEACHINGRESEARCH'"
            type="primary"
            @click="$router.push({name:'pushTeaching'})"
          >发布教研</el-button>

          <el-button
            v-else-if="activeTabName==='WEB_CAST'"
            type="primary"
            @click="$router.push({name:'pushIssueLive'})"
          >发布在线课程</el-button>
        </el-col>
      </el-row>

      <el-row class="searchCon">
        <el-col
          v-for="(lesItem,li) in prepareLesson.records"
          :xs="20"
          :sm="12"
          :span="12"
          :lg="8"
          class="lesson_list_Con"
        >
          <div class="dashedBox">
            <!-- 在线课程 -->
            <template v-if="!activeKeyFn">
              <div class="lesson_box flex-box">
                <div class="lft_box head_img">
                  <img :src="lesItem.user.avatarUrl" alt="not find" />
                  <p>lesItem.user.namelesItem.user.name{{ lesItem.user.name }}</p>
                </div>
                <div class="rig_box">
                  <div class="titleC">
                    <b>{{ lesItem.title }}lesItem.titlelesItem.titlelesItem.title</b>
                  </div>
                  <div class="trick">
                    123123
                    <span
                      v-for="(clItem,i) in lesItem.categoryList"
                    >{{ clItem | filterCate(i,lesItem.categoryList) }}</span> &nbsp;&nbsp;
                    <span>{{ lesItem.classTime }}</span>
                    <div class="specific_group labelSpan">{{ lesItem.profiles }}</div>
                    <div v-if="lesItem.tags" class="mark_radio">
                      <span v-for="(item,i) in lesItem.tags" :key="i" class="lesson_t">{{ item }}</span>
                      <!-- <span class="lesson_t">{{'课时'+li}}</span>
                      <span class="lesson_t">{{'课时'+li}}</span>-->
                    </div>
                    <div class="foot_bar_group">
                      <el-button type="text" icon="el-icon-eyes">{{ lesItem.countThumb }}</el-button>
                      <el-button type="text" icon="el-icon-message">{{ lesItem.countComment }}</el-button>
                      <el-button type="text" icon="el-icon-share">{{ lesItem.countShare }}</el-button>
                      <el-button type="text" icon="el-icon-time">{{ lesItem.createTime }}</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="rig_box lesson_box">
                <div class="titleC flex-box">
                  <span
                    v-show="lesItem.createType===&quot;ORIGINAL&quot;"
                    effect="plain"
                    class="isAuthor"
                  >原创</span>
                  <b>{{ lesItem.title }}</b>
                </div>
                <div class="trick">
                  <span
                    v-for="(clItem,i) in lesItem.categoryNameList"
                  >{{ clItem | filterCate(i,lesItem.categoryNameList) }}</span> &nbsp;&nbsp;
                  <span>{{ lesItem.classTime }}</span>
                  <div class="specific_group labelSpan">{{ lesItem.profiles }}</div>
                  <div v-if="lesItem.cateTagNameList" class="mark_radio">
                    <span
                      v-for="(item,i) in lesItem.cateTagNameList"
                      :key="i"
                      class="lesson_t"
                    >{{ item }}</span>
                    <!-- <span class="lesson_t">{{'课时'+li}}</span>
                    <span class="lesson_t">{{'课时'+li}}</span>-->
                  </div>
                  <div>发布用户:{{ lesItem.orgName }}</div>
                  <div>关联教研:{{ lesItem.teachingResearchTitle }}</div>

                  <!-- <div class="foot_bar_group">
                      <el-button type="text" icon="el-icon-eyes">{{lesItem.countThumb}}</el-button>
                      <el-button type="text" icon="el-icon-message">{{lesItem.countComment}}</el-button>
                      <el-button type="text" icon="el-icon-share">{{lesItem.countShare}}</el-button>
                      <el-button type="text" icon="el-icon-time">{{lesItem.createTime}}</el-button>
                  </div>-->
                </div>
              </div>
            </template>
          </div>
        </el-col>
      </el-row>

      <Pagination
        :current-page="listQuery.pager.page"
        :limit="listQuery.pager.pageSize"
        :total="total"
        :float="'right'"
        :layout="' prev, pager, next'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </section>
  </div>
</template>

<script>
import YesTabs from '@/components/YesTabs'
import Pagination from '@/components/Pagination'
import { teachingResearchReportPage } from '@/api/createResult'
import { webCastPage } from '@/api/personPrepareLesson'

export default {
  name: 'CreateResult',
  components: {
    YesTabs,
    Pagination
  },
  data () {
    return {
      total: 1,
      listQuery: {
        'condition': {
          'categoryList': [
            'string'
          ],
          'userId': this.$store.getters.userId
        },
        'orderBys': [
          {
            'asc': true,
            'column': 'string'
          }
        ],
        'pager': {
          'page': 1,
          'pageSize': 15
        }
      },
      state: '',
      activeTabName: 'TEACHINGRESEARCH',
      tabList: [{
        label: '教研',
        name: 'TEACHINGRESEARCH'
      },
      {
        label: '在线课程',
        name: 'WEB_CAST'
      }],

      classifyOptions: {
        '学段': ['all', '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
        '学科': ['all', '语文', '数学', '英语', '化学'],
        // '教材':['人教版','苏教版','沿海版'],
        '类型1': ['all', '教室', '课件', '反思', '课堂实录'],
        '类型2': ['教师成长', '学科教学']
      },
      lesson_list: [{
        title: '第二课秋天 作者田良玉'
      },
      {
        title: '第二课秋天 作者田良玉'
      },
      {
        title: '第二课秋天 作者田良玉'
      },
      {
        title: '第二课秋天 作者田良玉'
      },
      {
        title: '第二课秋天 作者田良玉'
      },
      {
        title: '第二课秋天 作者田良玉'
      },
      {
        title: '第二课秋天 作者田良玉'
      },
      {
        title: '第二课秋天 作者田良玉'
      },
      {
        title: '第二课秋天 作者田良玉'
      }

      ],
      initLesson: {
        total: 1,
        rescords: []
      }
    }
  },
  computed: {
    activeKeyFn () {
      console.log('router', this.$route.query)

      var stateName = this.activeTabName === 'TEACHINGRESEARCH'

      return stateName
    },
    prepareLesson () {
      const state = this.$store.state
      const stateName = this.activeTabName
      const prepareLesson = ['MATERIAL', 'artical'].indexOf(stateName) > -1 ? this.initLesson : stateName === 'TEACHINGRESEARCH' ? state.teachingResearch.teachReportInfo
        : state.personPrepareLesson.prepareLesson
      this.total = Number(prepareLesson.total) || 1
      return prepareLesson
    }
  },
  watch: {
    activeTabName: {
      handler: function (val) {
        console.log('val:', val)
        this.initDate(this.activeKeyFn)
      },
      immediate: true
    }
  },
  mounted () {

  },
  created () {
    this.activeTabName = this.$route.query && this.$route.query.activeTabName ? this.$route.query.activeTabName : 'TEACHINGRESEARCH'
    console.log(this.activeTabName)
    console.log('activeKeyFn:', this.activeKeyFn)
    // this.initDate()
  },
  methods: {
    initDate (activeKeyFn) {
      // 初始化
      // 发布的教研
      // this.getPersonPrepareLessonPage()// 备课 教研设计
      if (['MATERIAL', 'artical'].indexOf(this.activeTabName) <= -1) {
        this[!activeKeyFn ? 'getPersonPrepareLessonPage' : 'getTeachingResearchReportPage']()// 教研报告
      } else {

      }
    },

    getPersonPrepareLessonPage () {
      const params = {
        condition: {
          endTime: null,
          keyword: null,
          startTime: null,
          status: null
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      }
      console.log(123123123)

      // this.$store.dispatch('personPrepareLesson/Page', params)
      webCastPage(params).then(res => {
        console.log('在线课程;', res.data.records)
      }) //   => 在线课程分页接口
    },
    getTeachingResearchReportPage () {
      const params = {
        'condition': {
          'categoryList': [
            'string'
          ],
          'userId': 0
        },
        'orderBys': [
          {
            'asc': true,
            'column': 'string'
          }
        ],
        'pager': {
          'page': 1,
          'pageSize': 10
        }
      }
      this.$store.dispatch('teachingResearch/reportPage', params)
      // let  {data} = await personPrepareLessonPage(params)
    },

    async getTeachingResearch () {
      const dataParams = this.listQuery
      const { data } = await teachingResearch(dataParams)
      this.lesson_list = data.records
      this.total = data.total || this.total
    },
    handleClick (tab, e) {
      console.log('tab:', tab, e)
      this.activeTabName = tab.name
    },
    searchList (keyword) {
      if (this.activeTabName === 'WEB_CAST') {
        // 在线课程列表
        const params = {
          condition: {
            endTime: null,
            keyword: keyword,
            startTime: null,
            status: null
          },
          pager: {
            page: 1,
            pageSize: 10
          }
        }

        webCastPage(params).then(res => {
          console.log(res.data)
        })
      }
    },
    handleSizeChange (size) {
      this.listQuery.pager.pageSize = size
    },
    handleCurrentChange (page) {
      this.listQuery.pager.pageSize = page
    }
  }
}
</script>
<style lang="scss" scoped>
$bg: #2eb06f;
$gray: #e6f5ed;
$labg: #ddeae4;
$textColr-2: rgba(0, 0, 0, 0.45);

.searchBox {
  padding: 24px 40px;

  .classfiy_box {
    margin: 20px 0;
    padding: 15px 18px;
    border: 1px solid $bg;

    .class_link {
      padding: 5px;
      margin: 5px;
    }
  }

  .searchCon {
    margin: 15px -30px;
    line-height: 1.8;

    .lesson_list_Con {
      i,
      .labelSpan {
        color: $textColr-2;
        font-size: 12px;
      }

      > div {
        padding: 10px;
        border: rgba(0, 0, 0, 0.08) 1px dashed;

        .lesson_box {
          align-items: flex-start;
          border-radius: 10px;
          box-shadow: 1px 5px 9px 0px #d9dce2;
          padding: 15px;
        }
        .isAuthor {
          color: #2eb06f;
          background: $labg;
          border-radius: 20%;
          padding: 0 5px;
          margin-right: 5px;
        }
        .creater_radio {
          border-radius: 20px;
          background: #f1f1f1;
        }

        .rig_box {
          padding-left: 10px;

          .mark_radio {
            > span {
              color: $bg;
              background: $labg;
              border-radius: 12px;
              padding: 0 5px;
              margin: 5px;
            }
          }
        }

        .head_img {
          width: 50px;
          min-width: 50px;
          img {
            height: auto;
            width: 100%;
          }
        }
      }

      padding: 10px;
    }
  }

  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
}
</style>
